<template>
	<a-layout-sider v-model:collapsed="collapsed" collapsible>
		<a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" theme="dark" @select="handleSelect"
			mode="inline">
			<a-sub-menu key="baidu">
				<template #icon>
					<send-outlined />
				</template>
				<template #title>百度接口</template>
				<a-menu-item key="baiduocr">
					<pie-chart-outlined />
					<span>文本识别</span>
				</a-menu-item>
				<a-menu-item key="baidutextTranslate">
					<desktop-outlined />
					<span>文本翻译</span>
				</a-menu-item>
				<a-menu-item key="baiduocrTranslate">
					<file-outlined />
					<span>图片翻译</span>
				</a-menu-item>
			</a-sub-menu>
			<a-sub-menu key="ali">
				<template #icon>
					<container-outlined />
				</template>
				<template #title>阿里接口</template>
				<a-menu-item key="aliocr">
					<pie-chart-outlined />
					<span>文本识别</span>
				</a-menu-item>
				<a-menu-item key="alitextTranslate">
					<desktop-outlined />
					<span>文本翻译</span>
				</a-menu-item>
				<a-menu-item key="aliocrTranslate">
					<file-outlined />
					<span>图片翻译</span>
				</a-menu-item>
			</a-sub-menu>
			<a-sub-menu key="youdao">
				<template #icon>
					<hdd-outlined />
				</template>
				<template #title>有道接口</template>
				<a-menu-item disabled key="youdaoocr">
					<pie-chart-outlined />
					<span>文本识别</span>
				</a-menu-item>
				<a-menu-item disabled key="youdaotextTranslate">
					<desktop-outlined />
					<span>文本翻译</span>
				</a-menu-item>
				<a-menu-item disabled key="youdaoocrTranslate">
					<file-outlined />
					<span>图片翻译</span>
				</a-menu-item>
			</a-sub-menu>
		</a-menu>
	</a-layout-sider>
</template>

<script lang="ts">
	import {
		SendOutlined,
		HddOutlined,
		ContainerOutlined,
		PieChartOutlined,
		DesktopOutlined,
		UserOutlined,
		TeamOutlined,
		FileOutlined,
	} from '@ant-design/icons-vue';
	import {
		defineComponent,
		ref,
		reactive
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'
	export default defineComponent({
		components: {
			SendOutlined,
			HddOutlined,
			ContainerOutlined,
			PieChartOutlined,
			DesktopOutlined,
			UserOutlined,
			TeamOutlined,
			FileOutlined
		},
		setup() {
			const router = useRouter()
			const handleSelect = (param) => {
				router.replace({
					path: param.key
				})
			};
			const init = () => {
				router.push({
					path: '/baiduocr'
				})
			};
			init();
			return {
				openKeys: ref < string[] > (['baidu', 'ali']),
				selectedKeys: ref < string[] > (['1']),
				collapsed: ref < boolean > (false),
				handleSelect,
				init
			}
		}
	})
</script>

<style>

</style>
